<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
width:110px;
height:33.3%;
float:left;
border:1px solid black;
}
ul{
list-style:none;
width:500px;
height:300px;
align:center;
}
.biaoge{
width:500x;
}
.biaoge li{
float:left;
width:170px;
}
</style>       
<script>
function addlisthtml(){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;

var str=document.getElementById("list").innerHTML;
document.getElementById("list").innerHTML=str+'<li><input type="checkbox" name="checkselect"/></li><li>'+id+'</li><li>'+name+'</li><li onclick="delli(this)">&nbsp;DEL</li>';
var a = document.createElement("a");
var li = document.createElement("li");
a.setAttribute("href","javascript:void(0)");
a.setAttribute("onclick","delone(this)");
a.innerHTML = "删除";
li.appendChild(a);

var lis=document.getElementById("list").getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
	 lis[i].index = i;
     lis[i].onclick = function(){
              selectcolum(this.index);
}
}

}

function delli(obj)
{
document.getElementById("list").removeChild(obj.previousSibling.previousSibling.previousSibling);
document.getElementById("list").removeChild(obj.previousSibling.previousSibling);
document.getElementById("list").removeChild(obj.previousSibling);
document.getElementById("list").removeChild(obj);
}
function checkAll(c){
var status=c.checked;
var names=document.getElementById("name");
for(var i=0;i<names.length;i++){
names[i].checked=status;
}
}
var gcout=0;
function delAll(){

var colum=4;
var lister=document.getElementById("list");
var names=document.getElementsByName("checkselect");
var cout=0;


for(var j=names.length;j>0;j--){
	if(names[j-1].checked){
	  var lls=names[j-1].parentNode;
	  lister.removeChild(lls.nextSibling.nextSibling.nextSibling);
	  lister.removeChild(lls.nextSibling.nextSibling);
	  lister.removeChild(lls.nextSibling);
	  lister.removeChild(lls);
	}
}
/*
for(var j=0;j<names.length;j++){
	if(names[j].checked){
	  var lls=names[j].parentNode;
	  lister.removeChild(lls.nextSibling.nextSibling.nextSibling);
	  lister.removeChild(lls.nextSibling.nextSibling);
	  lister.removeChild(lls.nextSibling);
	  lister.removeChild(lls);
	  j--;
	}
}
*/
}
function checkOwn(){
var checkOwnEle=document.getElementById("checkOwn");
var checkOnes=document.getElementsByName("checkselect");
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked = checkOwnEle.checked;
}

}

function opposed(){
var againstEle=document.getElementById("opposed");
var checkOnes=document.getElementsByName("checkselect");
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked = !againstEle.checked;
}
}
</script>
<head>
<body>

<div>
<ul id="list">
<li><input type="button" value="全选"/><input type="checkbox" onclick="checkOwn()" id="checkOwn"/></br>
<input type="button" value="反选"/><input type="checkbox" onclick="opposed()" id="opposed"/></br>选中</li>
<li>编号</li><li>姓名</li><li><input type="button" value="删除"/><a href="javascript:delAll()">删除选中行</a></li>
<li><input type="checkbox" name="checkselect" onclick="checkAll(this)"/></li><li>1</li><li>李白</li><li></li>
</ul>



</div>
<hr/>
<ul class="biaoge">



<li>1</li>
<li><input type="text" name="id" id="id"/></li>


<li>李白</li>
<li><input type="text" style="" name="username" id="name"/></li>


<li><input type="reset" value="重置"/></li>
<li><input type="button" value="添加" onclick="addlisthtml()"/></li>


</ul>

<script>

/*var lis=document.getElementById("list").getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
	 lis[i].index = i;
     lis[i].onclick = function(){
              selectcolum(this.index);
aaaa}
    }
*/	
	function selectcolum(indexs)
	{
	aaaa//alert("下标索引值为："+this.index+"\n"+"文本内容是："+this.innerHTML);
	        var lis=document.getElementById("list").getElementsByTagName("li");
		   
				 
				
				 
			    	if(indexs%4==0){
				   lis[indexs].nextSibling.nextSibling.nextSibling.style.backgroundColor="blue";
                    lis[indexs].nextSibling.nextSibling.style.backgroundColor="blue";
                   lis[indexs].nextSibling.style.backgroundColor="blue";
                   lis[indexs].style.backgroundColor="blue";
					}else if(indexs%4==1){
					 lis[indexs].style.backgroundColor="blue";
                     lis[indexs].previousSibling.style.backgroundColor="blue";
                    lis[indexs].nextSibling.style.backgroundColor="blue";
                   lis[indexs].nextSibling.nextSibling.style.backgroundColor="blue";
					}else if(indexs%4==2){
					
                   lis[indexs].previousSibling.style.backgroundColor="blue";
                    lis[indexs].previousSibling.previousSibling.style.backgroundColor="blue";
                     lis[indexs].nextSibling.style.backgroundColor="blue";
                   lis[indexs].style.backgroundColor="blue";

					}else{
					 lis[indexs].previousSibling.previousSibling.previousSibling.style.backgroundColor="blue";
                     lis[indexs].previousSibling.previousSibling.style.backgroundColor="blue";
                   lis[indexs].previousSibling.style.backgroundColor="blue";
                  lis[indexs].style.backgroundColor="blue";
					}
				 
			}	
	       
	
</script>
</body>
</html>